<GenericConfirmationDialog
  {id}
  {label}
  {title}
  {positiveText}
  on:positive="doMute()"
>
  <div class="mute-dialog">
    <p>
      {confirmMuteText}
    </p>
    <div class="mute-dialog-form">
      <input type="checkbox"
             id="mute-notifications"
             name="mute-notifications"
             bind:checked="muteNotifications">
      <label for="mute-notifications">{intl.muteNotifications}</label>
    </div>
  </div>
</GenericConfirmationDialog>
<style>
  .mute-dialog {
    padding: 20px;
  }
  .mute-dialog-form {
    margin-top: 20px;
  }
</style>
<script>
  import GenericConfirmationDialog from './GenericConfirmationDialog.html'
  import { show } from '../helpers/showDialog.js'
  import { close } from '../helpers/closeDialog.js'
  import { oncreate } from '../helpers/onCreateDialog.js'
  import { setAccountMuted } from '../../../_actions/mute.js'
  import { formatIntl } from '../../../_utils/formatIntl.js'

  export default {
    oncreate,
    data: () => ({
      positiveText: 'intl.mute',
      title: '',
      muteNotifications: true
    }),
    computed: {
      confirmMuteText: ({ account }) => (
        formatIntl('intl.muteAccountConfirm', { account: `@${account.acct}` })
      )
    },
    methods: {
      show,
      close,
      async doMute () {
        const { account, muteNotifications } = this.get()
        this.close()
        await setAccountMuted(
          account.id,
          /* mute */ true,
          muteNotifications,
          /* toastOnSuccess */ true)
      }
    },
    components: {
      GenericConfirmationDialog
    }
  }
</script>
